<template>
  <div class="page">
    <div class="btn" @click="returnIndex">回到首页</div>
    <div class="createGroup el-icon-circle-plus-outline" @click="addGroup">新建文集</div>
    <div :class="[createInput ? 'input-active' : 'input-unactive']" class="input-group">
      <input v-model="newGroup" type="text" class="input-input" placeholder="请输入文集名称">
      <div class="input-btn">
        <div class="input-btn-get" @click="sureGroup">提交</div>
        <div class="input-btn-cancel" @click="cancel">取消</div>
      </div>
    </div>
    <div class="group-list">
      <ul>
        <li
          v-for="(item, index) in groups"
          ref="classifyDom"
          :key="item.classifyName"
          :class="[index === active ? 'list-active' : '']"
          class="group-list-item"
          @click="select(index, item.classifyId)">
          {{ item.classifyName }}
          <span :class="[index === active ? 'icon-position el-icon-third-setting' : '']" @click.stop="editGroup(index)" />
          <span :class="[index === groupActive ? 'group-edit' : 'disapear']">
            <ul>
              <li class="el-icon-edit-outline" @click="editGroupName(item.classifyName)">修改文集</li>
              <li class="el-icon-delete" @click="deleteClassify(item.classifyId)">删除文集</li>
            </ul>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { addClassify, searchClassify, editClassify, deleteclassifyName } from '@/api/writeArticle'
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  props: {
    date: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      groups: [],
      createInput: false, // 控制显示隐藏
      newGroup: '', // 新建文集
      active: 0,
      groupActive: '',
      classifyId: null
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    date(newVal) {
      this.getClassify()
    }
  },
  mounted() {
    this.getClassify()
  },
  created() {
    document.addEventListener('click', (e) => {
      if (this.$refs.classifyDom[0]) {
        if (!this.$refs.classifyDom[0].contains(e.target)) {
          this.groupActive = ''
        }
      }
    })
  },
  methods: {
    // 查询分类表
    getClassify() {
      var data = {
        userId: this.userId
      }
      searchClassify(data).then(response => {
        // console.log(response)
        this.classifyId = response.data.result[0].classifyId
        this.groups = response.data.result
        this.$emit('classifyId', response.data.result[0].classifyId)
      })
    },
    // 创建文集
    addGroup() {
      this.newGroup = ''
      this.createInput = true
    },
    // 取消新建
    cancel() {
      this.createInput = false
      this.newGroup = ''
    },
    // 选中
    select(index, classifyId) {
      this.active = index
      this.groupActive = ''
      this.classifyId = classifyId
      this.$emit('classifyId', this.classifyId)
    },
    // 编辑文集
    editGroup(index) {
      if (index === this.groupActive) {
        this.groupActive = ''
      } else {
        this.groupActive = index
      }
    },
    // 修改文集名字
    editGroupName(oldName) {
      this.$prompt('请输入新文集名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(value => {
        var data = {
          oldClassifyName: oldName,
          newClassifyName: value.value.trim(),
          userId: this.userId
        }
        editClassify(data).then(response => {
          this.getClassify()
        })
      })
    },
    // 删除文集
    deleteClassify(classifyId) {
      const data = {
        classifyId: classifyId,
        userId: this.userId
      }
      this.$confirm('确认删除此分类吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteclassifyName(data).then(response => {
          this.getClassify()
          this.active = 0
        })
      })
    },
    // 保存文集
    sureGroup() {
      if (!this.newGroup) {
        this.$message({
          message: '请输入文集名称',
          type: 'error'
        })
      } else {
        this.groups.push(this.newGroup)
        this.createInput = false // 关闭输入框
        var data = {
          userId: this.userId,
          classifyName: this.newGroup
        }
        addClassify(data).then(response => {
          // console.log(response)
          this.getClassify()
        })
      }
    },
    returnIndex() {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .page
    background: #404040
    color: #f2f2f2
    height: 100%
    font-size: 15px
    padding: 30px 0px
    .btn
      color: #ec7259
      border: 1px solid rgba(236,114,89,.8)
      padding: 12px 0
      margin: 0 16px
      cursor: pointer
      text-align: center
      border-radius: 20px
      &:hover
        border: 1px solid rgba(236,114,89,1)
        background: #ec7259
        color: #fff
    .createGroup
      margin: 30px 15px 0 15px
      font-size: 15px
      cursor: pointer
      user-select: none
    .input-group
      margin: 10px 15px 0 15px
      overflow: hidden
      & input
        width:100%
        height: 35px
        background: #595959
        outline: none
        border: 1px solid #333
        color: #ccc
        padding: 0 10px
        border-radius: 5px
      // .input-input
      .input-btn
        padding-top: 15px
        .input-btn-get
        .input-btn-cancel
          float: left
          padding: 8px 15px
          color: #999
          user-select: none
          cursor: pointer
        .input-btn-get
          border: 1px solid #42c02e
          color: #42c02e
          border-radius: 15px
        .input-btn-cancel:hover
          color: #ccc
    .group-list
      clear: both
      margin-top: -6px
      & ul
        margin-left: 0
        padding-left: 0
      .group-list-item
        list-style-type: none
        font-size: 14px
        text-align: left
        padding: 15px 15px
        user-select: none
        cursor: pointer
        position: relative
        &:hover
          background: #666
</style>
<style lang="stylus">
  .input-active
    height: 85px
    opacity: 100
    transition: all .3s ease-out
  .input-unactive
    height: 0
    opacity: 0
    transition: all .3s ease-out
  .list-active
    background: #666
    border-left: 3px solid #ec7259
  .icon-position
    position: absolute
    right: 20px
    font-size: 18px
  .group-edit
    position: absolute
    display: block
    right: 14px
    top: 45px
    z-index: 100
    clear: both
    width: 110px
    text-align: center
    background: #fff
    color: #595959
    border-radius: 5px
    & li:nth-child(1)
      border-bottom: 1px solid #d9d9d9
    & li
      list-style-type: none
      padding: 12px 20px
      &:hover
        background: #666
        border-radius: 2px
        color: #fff
  .disapear
    display: none
  .group-edit::before
    border-left: 9px solid #666
    border-right: 9px solid #666
    border-bottom: 9px solid #fff
    content: ''
    position: absolute
    top: -9px
    right: 7px
    display: inline-block
</style>
